<template>
  <div>
    <!-- 面包屑导航区 -->
    <bread-crumb :breadPath="breadPath"></bread-crumb>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="9">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getOrdersList">
            <el-button slot="append" icon="el-icon-search" @click="getOrdersList" ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 数据列表区 -->
      <el-table :data="ordersList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格(元)" prop="order_price" width="100px" align="center"></el-table-column>
        <el-table-column label="是否付款" width="90px" align="center">
          <template v-slot:default={row}>
            <el-tag v-if="row.order_pay === '0'" type="danger" >未付款</el-tag>
            <el-tag v-else type="success" >已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send" width="70px" align="center"></el-table-column>
        <el-table-column label="下单时间" width="140px" align="center">
          <template v-slot:default={row}>
            {{row.create_time | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230px" align="center">
          <template v-slot:default={row}>
            <!-- v-slot:default="scope" -->
            <!-- 修改地址 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(row)">改地址</el-button>
            <!-- 查看物流 -->
            <el-button type="success" icon="el-icon-map-location" size="mini" @click="showProgressDialog">查物流</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[8, 15, 20]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </el-card>
    <!-- 修改订单地址  对话框 -->
    <el-dialog title="修改地址" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <!-- 内容主体区 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px">
        <el-form-item label="省市区/县" prop="address1">
          <!-- 级联选择器 options用于指定数据源 -->
          <!-- props 用于指定配置对象 -->
          <el-cascader v-model="editForm.address1" :options="cityData"
                      :props="cascaderProps" @change="addressChanged" clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="editForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false" >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看物流  对话框 -->
    <el-dialog title="物流进度" :visible.sync="progressDialogVisible" width="50%">
      <!-- 内容主体区 -->
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index"
          :timestamp="activity.time">
          {{activity.context}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
  import breadCrumb from '@/components/breadcrumb'
  import cityData from './citydata.js'
  import { getOrders, getProgress } from '@/api/orders.js';

  export default {
    data() {
      return { 
        // 面包屑 传参
        breadPath: ['订单管理', this.$route.query.bread],
        // 搜索框的绑定数据
        queryInfo: {
          // 搜索用的参数
          query: '',
          // 当前页数
          pagenum: 1,
          // 每页显示的条数
          pagesize: 8
        },
        // 订单数据列表 
        ordersList: [],
        // 订单列表数据的总数
        total: 0,
        // 修改订单地址  对话框  显示与隐藏控制参数
        editDialogVisible: false,
        // 物流信息  对话框  显示与隐藏控制参数
        progressDialogVisible: false,
        // 修改对话框 对应的表单数据
        editForm: {
          address1: [],
          address2: ''
        },
        // 修改对话框表单的  验证规则
        editFormRules: {
          address1: [{ required: true, message: '请选择省份', trigger: 'change' }],
          address2: [{ required: true, message: '请填写详细地址', trigger: 'blur' }]
        },
        // 级联选择器的  选项数据
        cityData: cityData,
        // 级联选择器的  配置参数
        cascaderProps: {
          expandTrigger: 'hover',
          value: 'value',
          label: 'label',
          children: 'children',
          checkStrictly: false
        },
        // 指定TimeLine组件节点排序方向，默认为正序 false
        reverse: true,
        // TimeLine组件 绑定的 物流进度数据
        progressInfo: []
      }
    },
    created() {
      this.getOrdersList();
    },
    methods: {
      // 获取商品数据列表
      async getOrdersList() {
        try {
          const { data: res } = await getOrders(this.queryInfo);
          this.ordersList = res.goods;
          this.total = res.total;
          // console.log(this.goodList);
        } catch (err) {
          console.log(err);
        }
      },
      // 显示 修改地址  对话框
      showEditDialog(row) {
        console.log(row);
        this.editForm.address2 = row.consignee_addr;
        this.editDialogVisible = true;
      },
      // 显示 物流信息  对话框
      async showProgressDialog() {
        try {
          const { data: res } = await getProgress();
          this.progressInfo = res;
          // console.log(this.progressInfo);
        } catch (err) {
          console.log(err);
          this.$message.error('获取数据失败');
          this.progressDialogVisible = true;
        }
        this.progressDialogVisible = true;
      },
      // 监听 pagesize 改变的事件 
      handleSizeChange(newSize) {
        // console.log(newSize);
        this.queryInfo.pagesize = newSize;
        this.getOrdersList();
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        // console.log(newPage);
        this.queryInfo.pagenum = newPage;
        this.getOrdersList();
      },
      // 修改对话框 关闭时触发 重置对话框表单
      editDialogClosed() {
        this.$refs.editFormRef.resetFields();
        this.editForm.address1 = [];
      },
      // 级联选择器 变更选项时触发 
      addressChanged() {
        console.log(this.editForm);
      }
    },
    components: {
      breadCrumb,
    }
  }
</script>

<style lang="less" scoped>

</style>